<template>
  <div id="downchart"></div>
</template>

<script setup>
import { onMounted} from "vue";
import * as echarts from "echarts";
import {factoryStatistics} from "@/api/home/index"

 onMounted(()=>{
  let mychart = echarts.init(document.querySelector("#downchart"));
 factoryStatistics().then((res)=>{
// 使用for in循环遍历对象的属性
for (let key in res.data) {
 if(key=="wsclcCnt"||key=='szjhzCnt'){
      continue
  }
  // 把属性名和属性值添加到option.series[0].data数组中
  option.series[0].data.push({ name: key, value:res.data[key] });
}
// 调用setOption方法更新图表
mychart.setOption(option);
})
  //===================第二个echarts图==================================
  let option = {
    tooltip: {
      trigger: "none",
    },
    title: {
      text: "泵站数量",
      left: "31%",
      top: "35%",
      // text: "厂_治污设施",
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 12, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "60%"],
        center: ["50%", "40%"],
        type: "pie",
        data:[],
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },

        label: {
          show: false, //指示线
        },
      },
    ],
  };
  mychart.setOption(option);
  document.getElementById("downchart").setAttribute("_echarts_instance_", "");
 })
</script>

<style scoped>
#lefttop {
  width: 84%;
  height: 350px;
  /* background-color: #14181e; */
    margin: 20px 0 0px 20px;
    box-sizing: border-box;
border-radius: 6%;
display: flex;
}

.screen-top-left1 {
  margin: 5px;
  border-radius: 10px;
}

#topchart,
#downchart {
  width: 100%;
  height: 100%;
}

.topbox,
.downbox {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
}
#span-title {
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 16px;
  margin: 15px;
  font-family: SimHei;
}
#lefttop-box{
  height: 95%;
          width: 96%;
          background: rgba(4, 14, 17, 0.7);
          border-radius: 2%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
}
#downchart {
  width: 100%;
  height: 100%;
}
</style>